<template>
  <div>
    <avue-crud
      ref="crud"
      class="avue-new-table"
      :data="weekDayTableData"
      :option="weekDayTableOption"
      :table-loading="weekDayTableLoading"
    >
      <template slot-scope="scope" slot="menuRight">
<!--        <el-button size="small" :loading="buttonLoading"-->
<!--                   @click="doNextWeek">生成下周工作时间</el-button>-->
        <el-button size="small" type="primary" @click="saveData">保存</el-button>
      </template>
      <template slot-scope="scope" slot="workType">
        <el-select v-model="scope.row.workType" @change="toType(scope)">
          <el-option
            v-for="item in workTypeArr"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <template slot-scope="scope" slot="schedulIds">
        <el-select
          v-model="scope.row.schedulIds"
          filterable
          multiple
          @change="toSchedul(scope)"
        >
          <el-option
            v-for="item in schedulArr"
            :key="item.id"
            :label="item.schedulName"
            :value="item.id"
          ></el-option>
        </el-select>
      </template>
      <template slot-scope="scope" slot="schedulNames"
                v-if="scope.row.schedulNames.length">
              <span
                v-for="(item, index) in scope.row.schedulNames"
                :key="index">
                {{ item }}
                {{ index === scope.row.schedulNames.length - 1 ? '' : '，' }}
              </span>
      </template>
      <template slot-scope="scope" slot="menu">
        <table-column-btns :btns="tableBtns" :scope="scope"></table-column-btns>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import {weekDayTableOption} from '../const/option'
import {dataDetail,dataweek} from "../const/data.js"
export default {
  name: "weekTime",
  components: {},
  data() {
    return {
      weekDayTableData: [],
      weekDayTableOption,
      workTypeArr: [],
      weekDayTableLoading: false,
      schedulArr: [],

      modBtns: [
        {
          name: "添加时间",
          click: this.handleCreate
        }
      ],
      tableBtns: [
        {
          name: "编辑",
          click: this.handleUpdate
        },
        {
          name: "删除",
          click: this.handleDelete,
          color: 'red'
        }
      ],
      listLoading: false,
      id: null,
      tableData: [],
      buttonLoading: false
    };
  },
  created() {
    this.init()
  },
  methods: {
    init(id) {
      this.id = id
      this.getSchedulList()
      this.getDictionary()
      this.getDetail()
    },
    getDictionary() {
    
    },
    async getSchedulList() {
      this.weekDayTableData=dataweek
    },
    async getDetail() {
          this.id = dataDetail.calendarId
    },
    searchChange() {
      this.getDetail()
    },
    handleDelete(row) {
      
    },
    toType(row) {
      if (row.row.workType === "vacation") {
        row.row.schedulIds = [];
      }
    },
    toSchedul(row) {
      if (row.row.workType === "vacation") {
        if (row.row.schedulIds !== []) {
          this.$message.error("类型为休假时不可有班次信息");
          row.row.schedulIds = [];
        }
      }
    },
    // 保存
    saveData() {
      let b = true;
      this.weekDayTableData.forEach(weekDay => {
        if (weekDay.workType === "work" && weekDay.schedulIds.length === 0) {
          b = false;
        }
      });
      /* this.weekDayTableData.filter(weekDay => weekDay.workType === 'work' && weekDay.schedulIds.length === 0) */
      if (b === false) {
        this.$message.error("类型为上班请选择班次");
      } else {
      
      }
    },
    doNextWeek() {
      this.$confirm('确定按照当前配置生成下周工作时间?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doNextWeekRequest()
      })
    },
    async doNextWeekRequest() {
    
    
    },
  },
};
</script>

<style scoped>
</style>
